<template>
 <div>
     <v-card-text class="pa-0">
        <v-data-table
        :headers="complex.headers"
        :items="complex.items"
        :rows-per-page-items="[8,25,50,{text:'All','value':-1}]"
        class="elevation-1"
        item-key="name"
        
        v-model="complex.selected"
        >
        <template slot="items" slot-scope="props">
         <td>
            {{ props.index+1}}
        </td>               
            <td>
            <v-avatar size="32">
                <img :src="props.item.avatar" alt="">
            </v-avatar> 
            </td>
            <td>{{ props.item.name }}</td>
            <td>{{ props.item.email }}</td>
            <td>{{ props.item.phone }}</td>
            <td>
            <v-btn depressed outline icon fab dark color="primary" small>
                <v-icon>edit</v-icon>
            </v-btn>
            <v-btn depressed outline icon fab dark color="pink" small>
                <v-icon>delete</v-icon>
            </v-btn>
            </td>
        </template>
        </v-data-table>
    </v-card-text>
 </div>
</template>

<script>
export default {
  props: ["tableData"],
  data() {
    return {
      complex: {
        headers: [
          {
            text: "num",
            value: "asdad"
          },
          {
            text: "Avatar",
            value: "avatar"
          },
          {
            text: "Name",
            value: "name"
          },
          {
            text: "Email",
            value: "email"
          },
          {
            text: "Phone",
            value: "phone"
          },
          {
            text: "Action",
            value: ""
          }
        ],
        items: this.tableData
      }
    };
  },
  components: {}
};
</script>

<style>
</style>
